<template>
    <div class="container">
        <!-- 主界面 -->
        <div class="wrap">
            <div class="grid">
                <div
                    class="grid_item"
                    v-for="(item, index) in giftList"
                    :class="activeIndex == index ? 'grid_item_active' : ''"
                >
                    <img class="grid_img" :src="item.img" />
                    <div class="grid_coin">{{ item.coin }}金币</div>
                </div>
                <div class="grid_num_text">奖品数量</div>
                <div class="grid_num_box1">
                    <div
                        :class="gridNum1 != null ? 'grid_num_list' + gridNum1 : ''"
                        :style="{
                            transitionDuration: gridNum1 != null ? 1 + gridNum1 * 0.1 + 's' : null,
                        }"
                    >
                        <template v-for="index in 2">
                            <div class="grid_num_item" v-for="item in 10">
                                {{ item - 1 }}
                            </div>
                        </template>
                    </div>
                </div>
                <div class="grid_num_box2">
                    <div
                        :class="gridNum2 != null ? 'grid_num_list' + gridNum2 : ''"
                        :style="{
                            transitionDuration: gridNum2 != null ? 1.5 + gridNum2 * 0.1 + 's' : null,
                        }"
                    >
                        <div class="grid_num_item" v-for="item in 5">
                            {{ item - 1 }}
                        </div>
                        <template v-for="index in 2">
                            <div class="grid_num_item" v-for="item in 10">
                                {{ item - 1 }}
                            </div>
                        </template>
                    </div>
                </div>
                <div class="grid_num_box3">
                    <div
                        :class="gridNum3 != null ? 'grid_num_list' + gridNum3 : ''"
                        :style="{
                            transitionDuration: gridNum3 != null ? 2 + gridNum3 * 0.1 + 's' : null,
                        }"
                        @transitionend="endDial()"
                    >
                        <template v-for="index in 3">
                            <div class="grid_num_item" v-for="item in 10">
                                {{ item - 1 }}
                            </div>
                        </template>
                    </div>
                </div>
                <div class="grid_dial_btn" @click="openDial()">
                    <div>立即抽奖</div>
                    <div>10点券/次</div>
                </div>
            </div>
        </div>
        <!-- 领取弹窗 -->
        <Transition name="fade">
            <div class="dialog" v-if="receiveShow" @click.stop>
                <div class="receive">
                    <img class="receive_gift_img" :src="receiveGift.img" />
                    <div class="receive_gift_name">
                        {{ receiveGift.name }}x{{ receiveGift.num }}<br />价值{{
                            receiveGift.coin * receiveGift.num
                        }}金币
                    </div>
                    <div class="receive_sure_btn" @click="receiveShow = false">好的</div>
                </div>
            </div>
        </Transition>
    </div>
</template>
<script lang="ts">
import giftImg1 from "./images/gift_img1.png";
import giftImg2 from "./images/gift_img2.png";
import giftImg3 from "./images/gift_img3.png";
import giftImg4 from "./images/gift_img4.png";
import giftImg5 from "./images/gift_img5.png";
import giftImg6 from "./images/gift_img6.png";
import giftImg7 from "./images/gift_img7.png";
import giftImg8 from "./images/gift_img8.png";
import giftImg9 from "./images/gift_img9.png";
import giftImg10 from "./images/gift_img10.png";
import giftImg11 from "./images/gift_img11.png";
import giftImg12 from "./images/gift_img12.png";

let vm;
export default {
    data() {
        return {
            // 领取弹窗
            receiveShow: false,
            receiveGift: null,
            // 转盘
            isWorking: false, // 抽奖中
            activeIndex: null, // 当前选中序号
            resultIndex: null, // 抽中结果序号
            dialTimer: null, // 转盘定时器
            // 奖品数量
            gridNum1: null,
            gridNum2: null,
            gridNum3: null,
            // 接口数据
            giftList: [
                { name: "香水", img: giftImg1, giftId: 4235618, coin: 10 },
                { name: "多喝水", img: giftImg2, giftId: 10002116, coin: 30 },
                { name: "999玫瑰", img: giftImg3, giftId: 10002114, coin: 50 },
                { name: "神秘蛋蛋", img: giftImg4, giftId: 10022002, coin: 50 },
                { name: "小精灵", img: giftImg5, giftId: 10022004, coin: 100 },
                { name: "美得像只鸡", img: giftImg6, giftId: 10017855, coin: 100 },
                { name: "猪头", img: giftImg7, giftId: 10002118, coin: 30 },
                { name: "金鸡报喜", img: giftImg8, giftId: 4241710, coin: 50 },
                { name: "比心", img: giftImg9, giftId: 10008304, coin: 500 },
                { name: "宝宝心里苦", img: giftImg10, giftId: 4241907, coin: 300 },
                { name: "掌上明猪", img: giftImg11, giftId: 10010603, coin: 80 },
                { name: "大天使男", img: giftImg12, giftId: 10044629, coin: 200 },
            ],
        };
    },
    methods: {
        init() {},
        openDial() {
            if (vm.isWorking) return;
            vm.isWorking = true;
            // 重置
            vm.resultIndex = null;
            vm.gridNum1 = null;
            vm.gridNum2 = null;
            vm.gridNum3 = null;

            // 领取成功，运行转盘抽奖
            vm.receiveGift = {...vm.giftList[Math.floor(Math.random() * 12)],
                num: Math.ceil(Math.random() * 50)
            };
            vm.runDial();
            // 延迟1s出结果
            setTimeout(() => {
                vm.giftList.forEach((item, index) => {
                    if (item.giftId == vm.receiveGift.giftId) {
                        vm.resultIndex = index;
                    }
                });
            }, 1000);
        },
        // 运行转盘抽奖
        runDial(time = 50) {
            vm.dialTimer = setTimeout(() => {
                // 步数递进
                vm.activeIndex = vm.activeIndex >= 11 ? 0 : vm.activeIndex + 1;
                // 关键步处理
                if (vm.resultIndex == vm.activeIndex) {
                    if (time == 50) {
                        // 到达减速格
                        time *= 1.4;
                    } else {
                        // 到达目标格，设置奖品数量
                        let num = String(vm.receiveGift.num);
                        num = "000".substring(num.length) + num;
                        vm.gridNum1 = num[0];
                        vm.gridNum2 = num[1];
                        vm.gridNum3 = num[2];
                        return;
                    }
                } else if (time > 50) {
                    // 减速中
                    time *= 1.2;
                }
                vm.runDial(time);
            }, time);
        },
        // 抽奖结束
        endDial() {
            vm.receiveShow = true;
            vm.isWorking = false;
        },
    },
    created() {
        vm = this;
        vm.init();
    },
    destroyed() {
        clearTimeout(vm.dialTimer);
    },
};
</script>
<style lang="scss" scoped src="./luck_draw.scss"></style>
